window.onload = () => {
    let leftBtn = document.querySelector(".leftBtn");
    let rightBtn = document.querySelector(".rightBtn");
    let bannerBox = document.querySelector(".bannerBox");
    let imgBox = document.querySelectorAll(".imgBox");
    let currentIdx = 0;
    let bannerState = true;

    leftBtn.onclick = function () {
        console.log(bannerState);
        if (!bannerState) return;

        if (currentIdx !== 0) {
            currentIdx--;
            move(bannerBox);
        }
    };
    rightBtn.onclick = function () {
        console.log(bannerState);
        if (!bannerState) return;
        if (currentIdx < imgBox.length - 1) {
            currentIdx++;
            move(bannerBox);
        }
    };
    // bannerBox.addEventListener("transitionend", );
    bannerBox.ontransitionend = function () {
        console.log(1);
        bannerState = true;
    }

    function move(ele) {
        bannerState = false;
        let width = imgBox[0].offsetWidth;
        ele.style.transform = `translate(-${currentIdx * width}px,0)`;
    }
};